<template>
  <section>
    <!--工具条-->
    <div class="section-content clearfix">
      <el-col :span="24" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.name" placeholder="名称" @keyup.enter.native="getUsers()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.deviceId" placeholder="序列号" @keyup.enter.native="getUsers()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="getUsers">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleAdd">创建</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <!--列表-->
      <el-table
        :data="videolist"
        highlight-current-row
        v-loading="listLoading"
        @selection-change="selsChange"
        style="width: 100%;"
      >
        <el-table-column type="index" label="序号" width="80" :index="indexMethod"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <!-- <el-table-column prop="deviceId" label="deviceId">
        </el-table-column>-->
        <el-table-column prop="videoSn" label="序列号"></el-table-column>
        <el-table-column prop="videoPasswd" label="密码"></el-table-column>
        <el-table-column label="视频">
          <template scope="scope">
            <span class="pb-name" @click="goPlay(scope.$index, scope.row)">播放</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template scope="scope">
            <i
              title="编辑"
              @click="videoedit(scope.$index, scope.row)"
              icon="el-icon-edit"
              circle
              class="pb-icon icon-edit"
            ></i>
            <i
              circle
              title="删除"
              @click="handleDel(scope.$index, scope.row)"
              icon="el-icon-delete"
              class="pb-icon icon-delete"
            ></i>
          </template>
        </el-table-column>
      </el-table>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="10"
          :total="total"
          style="float:right;"
        ></el-pagination>
      </el-col>
    </div>

    <!--新增界面-->
    <el-dialog title="创建" v-show="addFormVideo" @close="addFormVideo = false">
      <div slot="footer" style="text-align: left; ">
        <el-form :model="addForm" :rules="addFormRules" label-width="90px" ref="addForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="deviceId" prop="deviceId">
                        <el-input v-model="addForm.deviceId"></el-input>
          </el-form-item>-->
          <el-form-item label="序列号" prop="videoSn">
            <el-input v-model="addForm.videoSn"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="videoPasswd">
            <el-input v-model="addForm.videoPasswd"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click.native="addFormVideo = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--编辑界面-->
    <el-dialog title="编辑" v-show="editFormVisible" @close="editFormVisible = false">
      <div slot="footer" style="text-align: left; ">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="editForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="序列号" prop="videoSn">
            <el-input v-model="editForm.videoSn"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="videoPasswd">
            <el-input v-model="editForm.videoPasswd"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  video_query,
  video_post,
  video_put,
  video_delete
} from "../../api/api";

export default {
  data() {
    return {
      addFormVideo: false,
      addLoading: false,
      listLoading: false,
      editFormVisible: false,
      editLoading: false,
      page: 1,
      total: 0,
      filters: {
        name: "",
        deviceId: ""
      },
      addForm: {
        name: "",
        deviceId: "",
        videoSn: "",
        videoPasswd: "",
        plat: "ezviz"
        // createTime:'',
        // updateTime:''
      },
      editForm: {
        name: "",
        // deviceId: '',
        videoSn: "",
        videoPasswd: "",
        plat: "ezviz"
        // createTime:'',
        // updateTime:''
      },
      videolist: [],
      addFormRules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        videoSn: [
          {
            required: true,
            message: "请输入序列号",
            trigger: "blur"
          }
        ],
        videoPasswd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      },
      editFormRules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        videoSn: [
          {
            required: true,
            message: "请输入序列号",
            trigger: "blur"
          }
        ],
        videoPasswd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    goPlay(index, row) {
      let token = localStorage.getItem("key");
      console.log(row)
      // sessionStorage.setItem('videoSn',row.videoSn)
      // let openVideo = this.$router.resolve({
      //     path: "/devices/videoPlay",
      // });
      // window.open(openVideo.href,"_blank")
      // window.open("http://127.0.0.1:5500/demo/demo-monitor.html?videoSn="+row.videoSn+"","_blank")
      window.open(
        "/ys_camera/player/ui-voice.html?videoSn=" +
          row.videoSn +
          "&key=" +
          token +
          "",
        "_blank"
      );
    },
    getUsers() {
      let para = {
        pageNo: 1,
        pageSize: 1000,
        name: this.filters.name,
        deviceId: this.filters.deviceId,
        deviceId: sessionStorage.getItem("video_detail")
      };
      this.listLoading = true;
      video_query(para).then(res => {
        console.log(res)
        this.videolist = res.data.list;
        this.listLoading = false;
      });
    },
    handleAdd() {
      this.addFormVideo = true;
      this.addForm = {
        name: "",
        deviceId: "",
        videoSn: "",
        videoPasswd: "",
        plat: "ezviz",
        createTime: "",
        updateTime: ""
      };
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    indexMethod(index) {
      let num = (this.page - 1) * 10 + index + 1;
      return num;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getUsers();
    },
    addSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.addLoading = true;
            this.addForm.deviceId = sessionStorage.getItem("video_detail");
            let para = this.addForm;

            console.log(para);

            video_post(para).then(res => {
              if (res.code != 0) {
                this.$message({
                  message: res.message,
                  type: "error"
                });
              } else if (res.code == 0) {
                this.$message({
                  message: "提交成功",
                  type: "success"
                });
                this.$refs["addForm"].resetFields();
                this.addFormVideo = false;
                this.getUsers();
              }
              this.addLoading = false;
            });
          });
        }
      });
    },
    editSubmit() {
      this.editLoading = true;
      let para = this.editForm;
      video_put(para).then(res => {
        this.editLoading = false;
        if (res.code != 0) {
          this.$message({
            message: res.message,
            type: "error"
          });
        } else if (res.code == 0) {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.editFormVisible = false;
          this.editLoading = false;
          this.getUsers();
        }
      });
    },
    videoedit(index, row) {
      console.log(row);
      this.editFormVisible = true;
      let para = {
        id: row.id
      };
      video_query(para).then(res => {
        this.listLoading = false;
        this.editForm = res.data.list[0];
        console.log(res);
      });
    },
    handleDel(index, row) {
      console.log(row);
      this.$confirm("确认删除该用户吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          let para = {
            id: row.id
          };
          console.log(para);
          video_delete(para).then(res => {
            this.begCode(res.code, res.message);
            if (res.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getUsers();
            }
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getUsers();
  }
};
</script>